<!DOCTYPE html>
<html>
<head>
    <title>Selection</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
            <div id="example">
            <div class="demo-section k-content">
                <div id="chart"></div>
            </div>
            <div class="box">
                <h4>Mousewheel</h4>
                <div class="box-col" style="width: 500px;">
                    <ul class="options">
                        <li>
                            <input id="reverse" type="checkbox" />
                            <label for="reverse">Reverse</label>
                        </li>
                    </ul>
                </div>
                <div class="box-col">
                    <ul class="options">
                        <li>
                            <label for="zoom">Zoom direction</label>
                            <select id="zoom">
                                <option value="both">Both</option>
                                <option value="left">Left</option>
                                <option value="right">Right</option>
                            </select>
                        </li>
                    </ul>
                </div>
            </div>
            <script>
                function createChart() {
                    $("#chart").kendoChart({
                        title: {
                            text: "Olympic Medals won by USA"
                        },
                        legend: {
                            position: "bottom"
                        },
                        seriesDefaults: {
                            type: "column"
                        },
                        series: [{
                            name: "Gold Medals",
                            data: [40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
                            color: "#f3ac32"
                        }, {
                            name: "Silver Medals",
                            data: [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
                            color: "#b8b8b8"
                        }, {
                            name: "Bronze Medals",
                            data: [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29],
                            color: "#bb6e36"
                        }],
                        categoryAxis: {
                            categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
                            majorGridLines: {
                                visible: false
                            },
                            select: {
                                from: 2,
                                to: 5
                            }
                        },
                        selectStart: onSelectStart,
                        select: onSelect,
                        selectEnd: onSelectEnd
                    });
                }

                function formatRange(e) {
                    var categories = e.axis.categories;

                    return kendo.format("{0} - {1} ({2} - {3})",
                        e.from, e.to,
                        categories[e.from],
                        // The last category included in the selection is at (to - 1)
                        categories[e.to - 1]
                    );
                }

                function onSelectStart(e) {
                    kendoConsole.log(kendo.format("Select start :: {0}", formatRange(e)));
                }

                function onSelect(e) {
                    kendoConsole.log(kendo.format("Select :: {0}", formatRange(e)));
                }

                function onSelectEnd(e) {
                    kendoConsole.log(kendo.format("Select end :: {0}", formatRange(e)));
                }

                function setOptions() {
                    var chart = $("#chart").data("kendoChart");

                    $.extend(true /* deep */, chart.options, {
                        categoryAxis: {
                            select: {
                                mousewheel: {
                                    reverse: $("#reverse").prop("checked"),
                                    zoom: $("#zoom").val()
                                }
                            }
                        }
                    });

                    chart.refresh();
                }

                $("#reverse, #zoom").click(setOptions);

                $(document).ready(createChart);
                $("#example").bind("kendo:skinChange", createChart);

            </script>
            <div class="demo-section">
                <h4>Console log</h4>
                <div class="console"></div>
            </div>
        </div>


    
    
</body>
</html>
